<template>
  <div 
    class="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1 overflow-hidden"
    @click="$emit('click')"
  >
    <!-- 卡片头部 -->
    <div class="p-6 pb-4">
      <div class="flex items-center mb-4">
        <div :class="[tool.color, 'w-12 h-12 rounded-xl flex items-center justify-center mr-4']">
          <i :class="tool.icon" class="text-white text-xl"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-800 mb-1">{{ tool.title }}</h3>
          <div class="flex items-center text-sm text-gray-500">
            <i class="fas fa-star text-yellow-400 mr-1"></i>
            <span>推荐工具</span>
          </div>
        </div>
      </div>
      
      <p class="text-gray-600 leading-relaxed mb-4">
        {{ tool.description }}
      </p>
    </div>

    <!-- 特性标签 -->
    <div class="px-6 pb-4">
      <div class="flex flex-wrap gap-2">
        <span 
          v-for="feature in tool.features" 
          :key="feature"
          class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700"
        >
          <i class="fas fa-check text-green-500 mr-1 text-xs"></i>
          {{ feature }}
        </span>
      </div>
    </div>

    <!-- 底部操作区 -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
      <div class="flex items-center justify-between">
        <div class="flex items-center text-sm text-gray-500">
          <i class="fas fa-users mr-1"></i>
          <span>{{ Math.floor(Math.random() * 1000) + 500 }}+ 用户使用</span>
        </div>
        <div class="flex items-center text-blue-600 font-medium">
          <span class="mr-2">立即使用</span>
          <i class="fas fa-arrow-right"></i>
        </div>
      </div>
    </div>

    <!-- 悬停效果装饰 -->
    <div class="absolute top-0 right-0 w-20 h-20 transform translate-x-10 -translate-y-10">
      <div :class="[tool.color, 'w-full h-full rounded-full opacity-10']"></div>
    </div>
  </div>
</template>

<script setup>
// 定义组件属性
defineProps({
  tool: {
    type: Object,
    required: true
  }
})

// 定义事件
defineEmits(['click'])
</script>

<style scoped>
/* 卡片动画效果 */
.cursor-pointer:hover .fas.fa-arrow-right {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}

/* 卡片内容渐变效果 */
.bg-white {
  position: relative;
  overflow: hidden;
}

.bg-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.bg-white:hover::before {
  left: 100%;
}
</style> 